<template>
  <div class="w-100">
    <el-container>
      <!--1侧边-->
      <el-aside class="fs17">
        <div>首页</div>
        <div @click="nava" class="firstLevel">1 餐柜管理
           <!--<span v-show="first1_1" class="el-icon-arrow-down"></span><span v-show="first1_2" class="el-icon-arrow-down"></span>-->
        </div>
        <div @click="navb" v-show="first1_1" class="secondLevel fs13">1.1 餐柜详情</div>
        <div @click="navc" v-show="first1_1" class="secondLevel fs13">1.2 添加餐柜</div>
        <div @click="navd" class="firstLevel">2 订单管理</div>
        <div @click="nave" v-show="first2_1" class="secondLevel fs13">2.1 订单详情</div>
        <div @click="navf" class="firstLevel">3 商品管理</div>
        <div @click="navg" v-show="first3_1" class="secondLevel fs13">3.1 添加商品</div>
        <div @click="navh" class="firstLevel">4 厨房管理</div>
        <div @click="navi" v-show="first4_1" class="secondLevel fs13">4.1 添加厨房</div>
        <div @click="navj" class="firstLevel">5 员工管理</div>
        <div @click="navk" v-show="first5_1" class="secondLevel fs13">5.1 添加员工</div>
        <div @click="navl" class="firstLevel">6 配送员管理</div>
        <div @click="navm" v-show="first6_1" class="secondLevel fs13">6.1 添加配送员</div>
        <div @click="navn" class="firstLevel">7 广告管理</div>
        <div @click="navo" v-show="first7_1" class="secondLevel fs13">7.1 添加广告</div>
        <div @click="navp" class="firstLevel">8 物业公司管理</div>
        <div @click="navq" v-show="first8_1" class="secondLevel fs13">8.1 添加物业公司</div>
      </el-aside>
      <el-main>
        <!--1.1-->
        <div v-show="nav_a"><cangui></cangui></div>
        <div v-show="nav_b"><detail></detail></div>
        <div v-show="nav_c"><addcangui></addcangui></div>
        <div v-show="nav_d"><dingdan></dingdan></div>
        <div v-show="nav_e"><ddxq></ddxq></div>
        <div v-show="nav_f"><spgl></spgl></div>
        <div v-show="nav_g"><addshangpin></addshangpin></div>
        <div v-show="nav_h"><cfgl></cfgl></div>
        <div v-show="nav_i"><addchufang></addchufang></div>
        <div v-show="nav_j"><yggl></yggl></div>
        <div v-show="nav_k"><addyuangong></addyuangong></div>
        <div v-show="nav_l"><psygl></psygl></div>
        <div v-show="nav_m"><tjpsy></tjpsy></div>
        <div v-show="nav_n"><gggl></gggl></div>
        <div v-show="nav_o"><tjgg></tjgg></div>
        <div v-show="nav_p"><wygsgl></wygsgl></div>
        <div v-show="nav_q"><tjwygs></tjwygs></div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import axios from 'axios'
  import cangui from './cangui_manage.vue'
  import detail from './cangui_details.vue'
  import addcangui from './cangui_addcangui.vue'
  import dingdan from './cangui_dingdan.vue'
  import ddxq from './cangui_ddxq.vue'
  import spgl from './cangui_spgl.vue'
  import addshangpin from './cangui_addshangpin.vue'
  import cfgl from './cangui_cfgl.vue'
  import addchufang from './cangui_addchufang.vue'
  import yggl from './cangui_yggl.vue'
  import addyuangong from './cangui_tjyg.vue'
  import psygl from './cangui_psygl.vue'
  import tjpsy from './cangui_tjpsy.vue'
  import gggl from './cangui_gggl.vue'
  import tjgg from './cangui_tjgg.vue'
  import wygsgl from './cangui_wygsgl.vue'
  import tjwygs from './cangui_tjwygs.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 总控制
      nav_a:true,
      nav_b:false,
      nav_c:false,
      nav_d:false,
      nav_e:false,
      nav_f:false,
      nav_g:false,
      nav_h:false,
      nav_i:false,
      nav_j:false,
      nav_k:false,
      nav_l:false,
      nav_m:false,
      nav_n:false,
      nav_o:false,
      nav_p:false,
      nav_q:false,
      formInline: {
          user: '',
          region: ''
      },
      addcanguishowOrnot:false,
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      addcangeshowOrnot:false,
      // 单项控制
      first1_1:true,
      first1_2:false,
      first2_1:true,
      first3_1:true,
      first4_1:true,
      first5_1:true,
      first6_1:true,
      first7_1:true,
      first8_1:true,
      first9_1:true,
    }
  },
  mounted:function(){
    //   this.$store.dispatch('getToken')
  },
  components:{
    cangui,
    detail,
    addcangui,
    dingdan,
    ddxq,
    spgl,
    addshangpin,
    cfgl,
    addchufang,
    yggl,
    addyuangong,
    psygl,
    tjpsy,
    gggl,
    tjgg,
    wygsgl,
    tjwygs
  },
  methods:{
    nava:function(){
      this.nav_a=true;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first1_1=!this.first1_1;
      console.log("===")
    },
    navb:function(){
      this.nav_a=false;
      this.nav_b=true;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navc:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=true;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navd:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=true;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first2_1=!this.first2_1
    },
    nave:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=true;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navf:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=true;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first3_1=!this.first3_1;
    },
    navg:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=true;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navh:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=true;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first4_1=!this.first4_1;
    },
    navi:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=true;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navj:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=true;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first5_1=!this.first5_1;
    },
    navk:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=true;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navl:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=true;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first6_1=!this.first6_1;
    },
    navm:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=true;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
    },
    navn:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=true;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=false;
      this.first7_1=!this.first7_1
    },
    navo:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=true;
      this.nav_p=false;
      this.nav_q=false;
    },
    navp:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=true;
      this.nav_q=false;
      this.first8_1=!this.first8_1;
    },
    navq:function(){
      this.nav_a=false;
      this.nav_b=false;
      this.nav_c=false;
      this.nav_d=false;
      this.nav_e=false;
      this.nav_f=false;
      this.nav_g=false;
      this.nav_h=false;
      this.nav_i=false;
      this.nav_j=false;
      this.nav_k=false;
      this.nav_l=false;
      this.nav_m=false;
      this.nav_n=false;
      this.nav_o=false;
      this.nav_p=false;
      this.nav_q=true;
    },
    onSubmit:function(){

    },
    onSubmit1:function(){
      this.addcanguishowOrnot=false;
      this.nav_a=true;
    }
  }
}
</script>
<style scoped>
section{width: 100%;height: 100%;}
/*1侧边*/
aside{width:200px;border-left: 2px solid #bbbbbb;border-right: 2px solid #bbbbbb;background-color: white}
aside>div{height: 50px;width:100%;border-bottom: 2px solid #bbbbbb;text-align: center;line-height: 50px;}
aside>div:nth-child(1){background-color: #6a6668}
/*总体样式构造*/
.secondLevel{}
.firstLevel{color:red}
</style>
